<div ng-include="'partials/common/crumb/crumb.html'"></div>
<div id="application" ng-controller="applicationCtrl" ng-init="init()">

	<div class="appheader">
		<div class="titleitem newapplication "  ng-class=" {'active':newapplication}" ng-click="newapplicationchange()">{{'DAPP_LIST' | translate}}</div>
		<div class="titleitem installed"  ng-class=" {'active':installed}" ng-click="installedchange()">{{'DAPP_INSTALL_LIST' | translate}}</div>
	</div>
	<div class="content first" ng-show="newapplication">
		<table class="table" ng-table="applist" border="0" width="100%" cellpadding="0" cellspacing="0"
			   template-pagination="custom/pager" >

			<thread>
				<tr>
					<td>{{'DAPP_ICON' | translate}}</td>
					<td>{{'DAPP_NAME' | translate}}</td>
					<td>{{'DAPP_DESCRIPTION' | translate}}</td>
					<td>ID</td>
					<td><div class = "category">{{'DAPP_CATEGORY' | translate}}</div></td>
					<td><div class = "balance">{{'DAPP_BANLANCE_DETAIL' | translate}}</div></td>
					<td><div class = "download">{{'DAPP_SOURCE_CODE' | translate}}</div></td>
				</tr>
			</thread>
			<tr ng-repeat="i in $data"  >
				<td><a ><img class="ico-img" src="{{i.icon}}" onerror="this.src='favicon.ico'"></a></td>
				<td><a >{{i.name}}</a></td>
				<td class="wop">{{i.description}}</td>
				<td >{{i.transactionId}}</td>
				<!--<td  data-title="'标签'" >{{i.tags}}</td>-->
				<td><div class = "category">{{i.category | catalogsFilter}}</div></td>
				<td ng-click="showBalance(i)" style = "color: rgb(63,123,217); cursor: pointer"><div class = "balance">{{'DAPP_DETAIL' | translate}}</div></td>
				<td><div class = "download"><a target="_blank" ng-href="{{i.link }}">{{'DAPP_DOWNLOAD' | translate}}</div></a></td>
			</tr>
		</table>

	</div>
	<div class="content third" ng-show="installed">
		<table class="table" ng-table="appinstalled" border="0" width="100%" cellpadding="0" cellspacing="0"
			   template-pagination="custom/pager" >
			<thead>
				<tr>
					<td>{{'DAPP_ICON' | translate}}</td>
					<td>{{'DAPP_NAME' | translate}}</td>
					<td>{{'DAPP_DESCRIPTION' | translate}}</td>
					<td>ID</td>
					<td><div class = "category">{{'DAPP_CATEGORY' | translate}}</div></td>
					<td>{{'DAPP_DEPOSIT' | translate}}</td>
					<td><div class = "balance">{{'DAPP_BANLANCE_DETAIL' | translate}}</div></td>
					<td><div class = "download">{{'DAPP_SOURCE_CODE' | translate}}</div></td>
				</tr>
			</thead>
			<tr ng-repeat="i in $data"  >
				<td><a target="_blank" ng-href="/dapps/{{i.transactionId }}"><img class="ico-img" src="{{i.icon}}"></a></td>
				<td><a target="_blank" ng-href="/dapps/{{i.transactionId }}">{{i.name}}</a></td>
				<td class="wop">{{i.description}}</td>
				<td>{{i.transactionId}}</td>
				<!--<td  data-title="'标签'" >{{i.tags}}</td>-->
				<td><div class = "category">{{i.category | catalogsFilter}}</div></td>
				<td><button class="deposit-btn" ng-click="depositDapp(i)">{{'DAPP_DEPOSIT' | translate }}</button></td>
				<td ng-click="showBalance(i)" style = "color: rgb(63,123,217); cursor: pointer"><div class = "balance">{{'DAPP_DETAIL' | translate}}</div></td>
				<td><div class = "download"><a target="_blank" ng-href="{{i.link }}">{{'DAPP_DOWNLOAD' | translate}}</div></a></td>
			</tr>
		</table>
		
	</div>
	<!-- 余额详情的弹窗 -->
	<div class="balance-dialog" ng-show = "isShowBalance">
		<div class="balance-detail"  ng-style = "tableStyle" >
			<div class="close-btn">
				<img src="../../assets/common/close.png" alt="" width = "20px" ng-click = "closeShowBalance()">
			</div>
			<table class = "table">
				<thread>
					<tr class = "header" >
						<td style = "border-top:1px solid #fff;">{{'DAPP_SUPPORT_COIN' | translate}}</td>
						<td style = "border-top:1px solid #fff;">{{'DAPP_COIN_CURRENT_QUANTITY' | translate}}</td>
						<td style = "border-top:1px solid #fff;">{{'DAPP_COIN_BALANCE' | translate}}</td>
					</tr>
				</thread>
				<!-- <tr ng-show="showBalances === []">
					<td>尚未拥有数据</td>
				</tr> -->
				<tr ng-repeat="i in showBalances"  >
					<td class="wop">{{i.currency}}</td>
					<td class="wop">{{i.quantityShow | unitFilter }}</td>
					<td class="wop">{{i.balance | xasFilter}}</td>
				</tr>
			</table>
		</div>
	</div>
	
	<div class = "deposit-dialog"  ng-show = "depositedDapp">
		<div class = "deposit-detail" ng-class="{'deposit-dialog-nosecondpassword': !userService.secondPublicKey, 'deposit-dialog-secondpassword': userService.secondPublicKey }">
			<div class="close-btn">
				<img src="../../assets/common/close.png" alt="" width = "20px" ng-click = "closeDeposit()">
			</div>
			<div>
				<select ng-model="currency" ng-options="i.value for i in currencys" id="deposit_item1">
						<option value=''>{{ 'DEPOSIT_COIN_TYPE' | translate }}</option>
				</select>
				<div class="">
					<input type="number" required ng-model="amount" ng-trim="true" placeholder="{{'DEPOSIT_AMOUNT' | translate}}" id="deposit_item3">
				</div>
				<div class="" ng-show="userService.secondPublicKey">
					<form action="">
						<input type="password" ng-model="secondPassword" id="deposit_item4" placeholder="{{'TRS_TYPE_SECOND_PASSWORD' | translate}}"  autocomplete="off">
					</form>
				</div>
				<p style = "font-size:15px">{{'DAPP_COIN_FEE' | translate}}</p>
				<div class="buttons">
					<button class="sent" ng-click="sentMsg()" class = "confirm-btn" style = "margin-right: 30px">{{'CONFIRM' | translate}}</button>
					<button class="sent" ng-click="closeDeposit()">{{'CANCEL' | translate}}</button>	
				</div>
				
			</div>
		</div>
	</div>

	<script type="text/ng-template" id="custom/pager">
		<ul class="pagination ng-table-pagination">
			<li ng-class="{'disabled': !page.active && !page.current, 'active': page.current}" ng-repeat="page in pages" ng-switch="page.type">
				<a ng-switch-when="prev" ng-click="params.page(page.number)" href="">
					<i class="mdi-hardware-keyboard-arrow-left">{{'PREV_PAGE' | translate}}</i>
				</a>
				<a ng-switch-when="first" ng-click="params.page(page.number)" href="">
					<span ng-bind="page.number"></span>
				</a>
				<a ng-switch-when="page" ng-click="params.page(page.number)" href="">
					<span ng-bind="page.number"></span>
				</a>
				<a ng-switch-when="more" ng-click="params.page(page.number)" href="">&#8230;</a>
				<a ng-switch-when="last" ng-click="params.page(page.number)" href="">
					<span ng-bind="page.number"></span>
				</a>
				<a ng-switch-when="next" ng-click="params.page(page.number)" href="">
					<i class="mdi-hardware-keyboard-arrow-right">{{'NEXT_PAGE' | translate}}</i>
				</a>
			</li>
		</ul>
	</script>
</div>